<template>
  <section class="echartBox-wrapper">
    <div class="circle" :ref="id">
      <div class="circle-left"></div>
      <div class="circle-right"></div>
      <div class="circle-bottom-left" :style="{ background: list.color }"></div>
      <div
        class="circle-bottom-right"
        :style="{ background: list.color }"
      ></div>
    </div>
    <div class="info">
      <p>{{ percent *100}}%</p>
      <p>{{ list.seriesData[0].name }}</p>
    </div>
  </section>
</template>

<script>
// import echarts from "../echarts/index";
export default {
  name: "pieEcharts",
  props: ["list", "id"],
  data() {
    return {
      percent: 0,
    };
  },
  mounted() {
    this.load();
  },
  methods: {
    load() {
      const total =
        this.list.seriesData[0].data[0] + this.list.seriesData[1].data[0];
      const count = this.list.seriesData[0].data[0];
      let percent;
      if (total !== 0) {
        percent = count / total;
      } else {
        percent = 0;
      }
      this.percent = percent;
      const right =
        this.$refs[this.id].getElementsByClassName("circle-right")[0];
      const left = this.$refs[this.id].getElementsByClassName("circle-left")[0];
      if (percent <= 0.5) {
        //红色区域不超过一半
        right.style.transform = `rotate(${percent * 360}deg)`;
      } else {
        //红色区域超过一半的情况，重点部分
        right.style.transform = `rotate(180deg)`;
        right.style.transition = `opacity 0s step-end 1s, transform 1s linear`; //timing-function需要设为linear来达到视觉上的平缓过渡
        right.style.opacity = 0;

        left.style.transition = `transform ${(percent - 0.5) / 0.5}s linear 1s`;
        left.style.transform = `rotate(${percent * 360 - 180}deg)`;
      }
    },
  },
};
</script>

<style lang="scss">
.echartBox-wrapper {
  width: 100%;
  height: 100%;
  .circle {
    -webkit-mask: radial-gradient(transparent 50px, #000 50px);
    width: 120px;
    height: 120px;
    overflow: hidden;
    border-radius: 50%;
    position: relative;
  }

  .circle-left {
    width: 50%;
    height: 100%;
    background: #26446f;
    transform-origin: 100% 50%;
    position: absolute;
    left: 0;
    z-index: 0;
  }

  .circle-right {
    width: 50%;
    height: 100%;
    background: #254470;
    transition: transform 1s linear;
    transform-origin: 0% 50%;
    position: absolute;
    right: 0;
    z-index: 2;
  }

  .circle-bottom-left {
    width: 50%;
    height: 100%;
    position: absolute;
    left: 0;
    z-index: -1;
  }

  .circle-bottom-right {
    width: 50%;
    height: 100%;
    position: absolute;
    right: 0;
    z-index: 1;
  }

  .info {
    width: 100%;
    height: 100%;
    text-align: center;
    margin-top: -70px;
  }
}
</style>